import React, { Component } from "react";
import { NavBar, Icon } from 'antd-mobile';
import { List } from 'antd-mobile';
import { Accordion } from 'antd-mobile';
import "./style/helpCenter.css"

const Item = List.Item;
const Brief = Item.Brief;

export default class HelpCenter extends Component {
    state = {
        disabled: false,
    }

    onChange = (key) => {
        console.log(key);
    }

    render() {
        return (
            <div className="helpCenter-div">
                <div>
                    <NavBar
                        className="NavBar-div"
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.location.href = '#/terran/myAfterLogin'}
                        rightContent={[
                            <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                            <Icon key="1" type="ellipsis" />,
                        ]}
                    >帮助中心</NavBar>
                </div>

                <h2>&nbsp;产品相关问题</h2>
                <List className="my-list">
                    <Item
                        arrow="horizontal"
                        thumb={require("../../imgs/account.png")}
                        multipleLine
                        onClick={() => window.location.href = '#/terran/helpCenterAccount'}
                    >
                        开户相关 <Brief>注册 | 实名 | 银行卡 | 手机 ...</Brief>
                    </Item>
                    <Item
                        arrow="horizontal"
                        thumb={require("../../imgs/trade.png")}
                        multipleLine
                        onClick={() => {window.location.href = '#/terran/helpCenterTrade'}}
                    >
                        交易相关 <Brief>认/申购 | 赎回 | 定投 | 分红 ...</Brief>
                    </Item>
                    <Item
                        arrow="horizontal"
                        thumb={require("../../imgs/profit.png")}
                        multipleLine
                        onClick={() => {window.location.href = '#/terran/helpCenterProfit'}}
                    >
                        收益相关 <Brief>资产计算 | 收益计算 | 更新时间 ...</Brief>
                    </Item>
                </List>


                <h2>&nbsp;常见问题</h2>
                <div style={{ marginTop: 10, marginBottom: 10, }}>
                    <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                        <Accordion.Panel header="1. 活期收益什么时候发放，卖出当天有收益吗？" className="pad">
                            <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999", }} className="helpCenter-answer-div">
                                答：活期每日结算收益，前一个自然日的收益一般会在第二天上午发放更新，具体以实际发放时间为准。活期普通取出交易确认所属自然日当天（含）开始没有收益。极速取现发起申请所属当天（含）开始没有收益。
                            </div>
                        </Accordion.Panel>
                    </Accordion>
                    <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                        <Accordion.Panel header="2. 基金购买和卖出是以什么时候的净值成交的？" className="pad">
                            <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }} className="helpCenter-answer-div">
                                答：每天15:00之前提交的基金申请按当日净值成交；每天15:00之后提交的申请将按照下一个交易日的净值成交；周末及法定节假日的申请按节后第一个交易日净值成交。
                            </div>
                        </Accordion.Panel>
                    </Accordion>
                    <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                        <Accordion.Panel header="3. 购买撤单资金多久会返还？" className="pad">
                            <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }} className="helpCenter-answer-div">
                                答：如果是通过储蓄罐活期购买的基金（包括恩亿优策略产品），资金一般会实时回到活期账户，不影响支付/取现；如果是通过银行卡购买则将会在T+2个交易日内返回到银行卡账户（T为交易日）。
                            </div>
                        </Accordion.Panel>
                    </Accordion>
                    <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                        <Accordion.Panel header="4. 基金卖出后什么时间到账？" className="pad">
                            <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }} className="helpCenter-answer-div">
                                答：基金赎回确认成功之后一般情况下货币基金T+1到T+2到账，非货币基金T+2到T+4到账，QDII基金T+8到T+13到账，若QDII基金赎回到储蓄罐活期则一般是T+6至9个交易日到达的（T为交易日）。
                            </div>
                        </Accordion.Panel>
                    </Accordion>
                    <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                        <Accordion.Panel header="5. 转换与转投的区别是什么？" className="pad">
                            <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }} className="helpCenter-answer-div">
                                答：转投主要包括两种模式，分别为转换与赎回转投。转换是指同一家基金公司管理的不同基金之间的转换；赎回转投则是通过赎回基金的同时再认/申购其他基金公司的基金产品。
                            </div>
                        </Accordion.Panel>
                    </Accordion>
                </div>
            </div>
        );
    }
}